<div class="modal-content">
    <div class="modal-header">
        <button class="close" ng-click="cancel()" type="button">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">资产编号规则</h4>
    </div>
    <div class="modal-body">
        <div class="wrapper wrapper-content animated fadeInRight">
            <form action="" class="form-horizontal m-t-md" name="myForm"
                  novalidate>
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span
                            class="text-danger">*</span>名称:</label>
                    <div class="col-sm-10">
                        <input class="form-control ng-pristine ng-untouched ng-valid ng-empty" name="name" ng-maxlength="30" ng-minlength="1"
                               ng-model="item.name"
                               placeholder="请输入名称" required type="text">
                        <div class="text-danger"
                             ng-if="myForm.name.$dirty && myForm.name.$invalid">
                            <span ng-if="myForm.name.$error.required"> 输入不能为空 </span> <span
                                ng-show="myForm.name.$error.maxlength">不能超过30个字符 </span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">分隔符:</label>
                    <div class="col-sm-10">
                        <input class="form-control ng-pristine ng-untouched ng-valid ng-empty" name="split" ng-maxlength="3"
                               ng-model="item.split"
                               placeholder="请输入分隔符" required type="text">
                        <div class="text-danger"
                             ng-if="myForm.split.$dirty && myForm.split.$invalid">
                            <span ng-if="myForm.split.$error.required"> 输入不能为空 </span> <span
                                ng-show="myForm.split.$error.maxlength">不能超过3个字符 </span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-2 control-label">序列位数:</label>
                    <div class="col-sm-10">
                        <input class="form-control ng-pristine ng-untouched ng-valid ng-empty" name="seq" ng-maxlength="2"
                               ng-model="item.seq"
                               placeholder="请输入序列位数" required type="number">
                        <div class="text-danger"
                             ng-if="myForm.seq.$dirty && myForm.seq.$invalid">
                            <span ng-if="myForm.seq.$error.required">输入不能为空 </span> <span
                                ng-show="myForm.seq.$error.maxlength">不能超过2个字符 </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">自定义字符串:</label>
                    <div class="col-sm-10">
                        <input class="form-control ng-pristine ng-untouched ng-valid ng-empty" name="str1" ng-maxlength="30"
                               ng-model="item.str1"
                               placeholder="请输入自定义字符串"  type="text">
                        <div class="text-danger"
                             ng-if="myForm.str1.$dirty && myForm.str1.$invalid">
                            <span ng-if="myForm.str1.$error.required"> 输入不能为空 </span> <span
                                ng-show="myForm.str1.$error.maxlength">不能超过30个字符 </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">规则:</label>
                    <div class="col-sm-10">
                        <table border="0" width="300">
                            <tr>
                                <td width="40%">
                                    <select style="width:100px; height:200px" multiple name="list1" size="12" ondblclick="moveOption(document.myForm.list1, document.myForm.list2)">
                                        <option ng-repeat="item in list1" value="{{item.id}}">{{item.name}}</option>
                                    </select>
                                </td>
                                <td width="20%" align="center">
                                    <input type="button" value=">>" onclick="moveOption(document.myForm.list1, document.myForm.list2)"><br />
                                    <br />
                                    <input type="button" value="<<" onclick="moveOption(document.myForm.list2, document.myForm.list1)">
                                </td>
                                <td width="40%">
                                    <select id="sellist2" style="width:100px; height:200px" multiple name="list2" size="12" ondblclick="moveOption(document.myForm.list2, document.myForm.list1)">
                                        <option ng-repeat="item in list2" value="{{item.id}}">{{item.name}}</option>
                                    </select>
                                </td>
                                <td>
                                    <button style="margin-bottom:7px"  onclick="changepos(list2,-1)" type="button">
                                        ∧</button>
                                    <br />
                                    <button style="margin-top:7px" onclick="changepos(list2,1)" type="button">
                                        ∨</button>
                                </td>
                            </tr>
                        </table>
                        <input style="margin-top:10px" type="text" name="uuidvalue" size="40">

                    </div>
                </div>

            </form>


        </div>
    </div>
    <div class="modal-footer" style="text-align: center">
        <button class="btn btn-warning" ng-click="cancel()">取消</button>
        <button class="btn btn-primary" ng-click="sure()"
                ng-disabled="myForm.$invalid">确认
        </button>
    </div>
    <script language="JavaScript">
        function swapNode(node1,node2){
            var parent = node1.parentNode;//父节点
            var t1 = node1.nextSibling;//两节点的相对位置
            var t2 = node2.nextSibling;
            //如果是插入到最后就用appendChild
            if(t1) parent.insertBefore(node2,t1);
            else parent.appendChild(node2);
            if(t2) parent.insertBefore(node1,t2);
            else parent.appendChild(node1);
        }
        function moveOption(e1, e2) {
            try {
                for (var i = 0; i < e1.options.length; i++) {
                    if (e1.options[i].selected) {
                        var e = e1.options[i];
                        e2.options.add(new Option(e.text, e.value));
                        e1.remove(i);
                        i = i - 1
                    }
                }
                document.myForm.uuidvalue.value = getvalue(document.myForm.list2);
            }
            catch (e) { }
        }
        function getvalue(geto) {
            var allvalue = "";
            for (var i = 0; i < geto.options.length; i++) {
                allvalue += geto.options[i].value + ",";
            }
            return allvalue;
        }
        function changepos(obj, index) {
            if (index == -1) {
                if (obj.selectedIndex > 0) {
                    var a=obj.options[obj.selectedIndex];
                    var b=obj.options[obj.selectedIndex - 1];
                    swapNode(a,b)
                    document.myForm.uuidvalue.value = getvalue(document.myForm.list2);
                }
            }
            else if (index == 1) {
                if (obj.selectedIndex < obj.options.length - 1) {
                    var a=obj.options[obj.selectedIndex];
                    var b=obj.options[obj.selectedIndex + 1];
                    swapNode(a,b)
                    document.myForm.uuidvalue.value = getvalue(document.myForm.list2);
                }
            }
        }
    </script>
</div>